<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="../css/index.css" />
	<link rel="stylesheet" type="text/css" href="../css/main.css"/>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
	<script src="html5plus://ready"></script>
	<style type="text/css">
		.toast{
			z-index: 2;
		}
		.van-search{
			padding: 20px 10px;
		}
		.van-search__action{
			color: white;
		}
	</style>
</head>
	<body>
		<div id="app">
			<header>
				<van-search placeholder="请输入搜索关键词" v-model="value"
				background="red"
				shape="round"
				:show-action="isSearch"
				@cancel="onCancel"
				@click="click"
				@search="search"
				>
				</van-search>
			</header>
			<div style="z-index: 15;width: 100%;height: 100%;" v-show="isSearch">
				<van-row style="background-color: white;">
					<van-col v-for="(u,i) in searchGoods" span="24" style="margin:10px 0px">
						<van-card
						  v-bind:price="u.RealPrice"
						  v-bind:title=u.Name
						  v-bind:origin-price="u.MarketPrice"
						  id="u.Id"
						  @click="GetId(i)"
						>
						<img v-bind:src="u.GoodsImageUrl.src" onerror="javascript:this.src='../img/insert.png'; "  slot="thumb">
						<div slot="tags" style="position: relative;top:60px">累计销售{{u.VirtualSaleCount}}</div>
						<div slot="footer">{{u.BrowseCount}}浏览</div>
						</van-card>
					</van-col>
				</van-row>
			</div>
			<section>
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<!-- 轮播图 -->
					<van-swipe :autoplay="2000" >
						<van-swipe-item v-for="(u,i) in ScrollImage" >
							<img :src="u.ImageUrl" />
						</van-swipe>
					</van-swipe>
					<van-row 
					shape="round"
					style=" height: 100px;border-radius:25px;background-color:white; padding-left: 20px;padding-top: 20px;">
						<van-col span="6" v-for="(u,i) in HotGoods ">
							<img v-bind:src="u.ImageName.src" onerror="javascript:this.src='../img/insert.png';" style="border-radius: 10px;width: 60px;height: 60px;">
							<div>{{u.Name}}</div>
						</van-col>
					</van-row>
					<van-row style=" height: 50px;border-radius:20px;background-color:white;margin:10px 0px;padding:0px 10px;">
						<van-col span="3" style="line-height: 50px;color: red;"><b>资讯</b></van-col>
						<div style="float:left;	width: 1px;margin-top:5px;height:40px;background-color: darkgray;"></div><!-- 画竖线 -->
						<van-col span="17" style="line-height: 50px;margin-left:10px;">
							<van-swipe :autoplay="5000" 
							:show-indicators = "false"
							:touchable ="false">
								<van-swipe-item v-for="(u,i) in Information" >
									<a href="#" style="color: #000000;">{{u.Title}}</a>
								</van-swipe>
							</van-swipe>
						</van-col>
						<div style="float:left;	width: 1px;margin-top:5px;height:40px;background-color: darkgray;"></div><!-- 画竖线 -->
						<van-col span="3" style="line-height: 50px;padding-left: 10px;"><b>更多</b></van-col>
					</van-row>
					<van-row style="background-color: white;">
						<div style="float:left;	width: 3px;height:40px;background-color: red;"></div><!-- 画竖线 -->
						<div style="line-height: 40px;padding-left: 10px;font-size: 20px;">热门推荐<van-icon name="hot-o" color="red"></van-icon></div>
						<van-col span="8" v-for="(u,i) in GoodsRecommend" >
							<div  @click="GetId(i)">
								<img v-bind:src="u.GoodsImageUrl.src" onerror="javascript:this.src='../img/insert.png'; "  alt="">
								<div>{{u.Name}}</div>
								<div style="color: red;font-size:18px ;">￥{{u.RealPrice}}</div>
							</div>
						</van-col>
					</van-row>
					<van-row style="background-color: white;margin:4px 0px 4px 10px;">
						<div style="float:left;	width: 5px;height:40px;background-color: blue;"></div><!-- 画竖线 -->
						<div style="line-height: 40px; font-size: 20px;">商品列表</div>
					</van-row>
					<van-row style="background-color: white;">
						<van-col v-for="(u,i) in Goods" span="24" style="margin:10px 0px">
							<van-card
							  v-bind:price="u.RealPrice"
							  v-bind:title=u.Name
							  v-bind:origin-price="u.MarketPrice"
							  id="u.Id"
							  @click="GetId(i)"
							>
							<img v-bind:src="u.GoodsImageUrl.src" onerror="javascript:this.src='../img/insert.png'; "  slot="thumb">
							<div slot="tags" style="position: relative;top:60px">累计销售{{u.VirtualSaleCount}}</div>
							<div slot="footer">{{u.BrowseCount}}浏览</div>
							</van-card>
						</van-col>
					</van-row>
				</van-pull-refresh>
			</section>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					value:"",
					ScrollImage:"",
					HotGoods:"",
					Information:"",
					GoodsRecommend:"",
					Goods:"",
					isSearch:false,
					count:"0",
					searchGoods:"",
					isLoading:false,
				},
				mounted(){
					var _this=this;
					//plus.runtime.quit() ---退出当前客户端程序
					var count = 0;
					var first = null;
					plus.key.addEventListener("backbutton",function(){  
						count ++;
						if(count == 1){
							_this.$toast({
							  position:"bottom",
							  duration:"1000",
							  message: '在返回一次退出应用',
							  className:'toast'
							});
							window.setTimeout(function(){
								count --;
							},1000);
						}
						else{
							plus.runtime.quit();
						}
					}); 
					ajax({
						type:"post",
						url:"http://dsapi.ysd3g.com/api/IndexData",
						dataType:"JSON",
						success:function(res){
							// console.log(res.Data);
							vm.ScrollImage=res.Data.CarouselFigureList;
							vm.HotGoods=res.Data.HotGoodsTypeList;
							vm.Information=res.Data.InformationList;
							vm.GoodsRecommend=res.Data.GoodsRecommendList;
						}
					}),
					ajax({
						type:"post",
						url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType:"JSON",
						success:function(res){
							// console.log(res.Data);
							vm.Goods=res.Data;
						}
					})
				},
				methods:{
					GetId:function(res){
						var _this=this;
						var x=_this.Goods[res].Id;
						var w=plus.webview.create("../views/Goodsdetail.html","Goodsdetail",{},{Id:x});
						plus.webview.show("Goodsdetail");
						
					},
					search:function(){
						var _this=this;
						ajax({
							type:"post",
							url:"http://dsapi.ysd3g.com/api/GoodsSearch",
							data:{name:_this.value},
							success:function(res){
								// console.log(res);
								_this.searchGoods=res.Data;
							}
						})
					},
					onCancel(){
						this.isSearch=!this.isSearch;
						this.count--;
						this.searchGoods="";
					},
					onRefresh(){
						ajax({
							type:"post",
							url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType:"JSON",
							success:function(res){
								// console.log(res.Data);
								vm.Goods=res.Data;
							}
						});
						setTimeout(() => {
						this.$toast({
							message:'刷新成功',
							position:"bottom"
						});
						this.isLoading = false;
						}, 500);
					},
					click(){
						var _this=this;
						console.log()
						if(_this.count==0){
							_this.isSearch=!this.isSearch;
							_this.count++;
						}
					},
				}
			})
		</script>
	</body>
</html>
